<template>
	<view>
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }"
			mode="aspectFill"></image>
		<u-navbar title="快检任务管理" :autoBack="true" leftIconColor="#fff" bgColor="transparent"
			:titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder>
			<view slot="right" class="right-btn">
				<view class="colfff fs-30" @tap="taskXiafa">
					任务下发
				</view>
			</view>
		</u-navbar>
		<!-- 搜索与筛选 -->
		<view class="w-710 mt-20 bgff pl-32 pr-32 br-20 mgt pt-20 pb-20">
			<view class="rowsb rowsm h-100 bor-b" @tap="showEduPicker = true">
				<view>年份</view>
				<view class="trt fs-28 col999 rowsc rowsm" v-if="!formData.year">请选择
					<u-icon name="arrow-right" size="17" color="#999" style="vertical-align: top;"></u-icon>
				</view>
				<view class="trt fs-28" v-else>{{ formData.year }}</view>
			</view>
			<view class="rowsb rowsm h-100 bor-b" @tap="showFastDetectionAccordingPicker = true">
				<view>快速检测依据</view>
				<view class="trt fs-28 col999 rowsc rowsm" v-if="!formData.fastDetectionAccording">请选择
					<u-icon name="arrow-right" size="17" color="#999" style="vertical-align: top;"></u-icon>
				</view>
				<view class="trt fs-28" v-else>{{ formData.fastDetectionAccording }}</view>
			</view>
			<view class="rowsb rowsm h-100 bor-b" @tap="showInstitutionPicker = true">
				<view>检测机构</view>
				<view class="trt fs-28 col999 rowsc rowsm" v-if="!formData.institution">请选择
					<u-icon name="arrow-right" size="17" color="#999" style="vertical-align: top;"></u-icon>
				</view>
				<view class="trt fs-28" v-else>{{ formData.institution }}</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="w-710 mt-20 bgff pl-32 pr-32 br-20 mgt pt-20 pb-20" v-for="(item, index) in list" :key="index">
			<view class="rowsb rowsm h-60">
				<view class="fs-28 fw-b">{{ item.detectionYear}}</view>
			</view>
			<view class="rowsb rowsm h-60">
				<view>快检检测类型</view>
				<view class="trt fs-28">{{ item.fastDetectionType || '暂无' }}</view>
			</view>
			<view class="rowsb rowsm h-60">
				<view>树种</view>
				<view class="trt fs-28">{{ item.productName || '暂无' }}</view>
			</view>
			<view class="rowsb rowsm h-60">
				<view>快检检测依据</view>
				<view class="trt fs-28">{{ item.fastDetectionAccording || '暂无' }}</view>
			</view>
			<view class="rowsb rowsm h-60">
				<view>检测机构</view>
				<view class="trt fs-28">{{ item.institutionName || '暂无' }}</view>
			</view>
			<view class="rowsb rowsm h-60">
				<view>录入人员</view>
				<view class="trt fs-28">{{ item.createName || '暂无' }}</view>
			</view>
			<view class="rowsb rowsm h-60">
				<view>录入部门</view>
				<view class="trt fs-28">{{ item.createDeptName || '暂无' }}</view>
			</view>
			<view class="rowsb rowsm h-60">
				<view class="w-120 bg rowsc rowsm colfff br-8" @click="showDetail(item)">详情</view>
				<view class="w-120 bg rowsc rowsm colfff br-8" @click="showSamplingSheet(item)">抽样单</view>
				<view class="w-120 bg rowsc rowsm colfff br-8" @click="showDetectionSheet(item)">检测单</view>
				<view class="w-120 bg rowsc rowsm colfff br-8" @click="startTask(item)" v-if="item.status == 1">启动</view>
			</view>
		</view>
		<!-- 年份选择 -->
		<u-picker :show="showEduPicker" :columns="eduColumns" @confirm="yearConfirm" @cancel="showEduPicker = false"
			@close="showEduPicker = false" />
		<!-- 快速检测依据选择 -->
		<u-picker :show="showFastDetectionAccordingPicker" :columns="fastDetectionAccordingColumns"
			@confirm="fastDetectionAccordingConfirm" @cancel="showFastDetectionAccordingPicker = false"
			@close="showFastDetectionAccordingPicker = false" />
		<!-- 检测机构选择 -->
		<u-picker :show="showInstitutionPicker" :columns="institutionColumns" @confirm="institutionConfirm"
			@cancel="showInstitutionPicker = false" @close="showInstitutionPicker = false" />
		
		<!-- 详情弹窗 -->
		<u-popup :show="showDetailModal" mode="center" :border-radius="20" :closeable="true" @close="closeDetailModal">
			<view class="detail-modal">
				<view class="modal-header">
					<view class="modal-title">任务详情</view>
				</view>
				<view class="modal-content">
					<view class="task-info">
						<view class="info-title">任务信息</view>
						<view class="info-item">
							<view class="info-label">年份</view>
							<view class="info-value">
								{{ currentTask.detectionYear || '暂无' }}
								<view class="level-tag" v-if="currentTask.level">省级</view>
							</view>
						</view>
						<view class="info-item">
							<view class="info-label">快检检测类别</view>
							<view class="info-value">{{ currentTask.fastDetectionType || '暂无' }}</view>
						</view>
						<view class="info-item">
							<view class="info-label">快检检测依据</view>
							<view class="info-value">{{ currentTask.fastDetectionAccording || '暂无' }}</view>
						</view>
						<view class="info-item">
							<view class="info-label">任务执行机构</view>
							<view class="info-value">{{ currentTask.executionAgency || '暂无' }}</view>
						</view>
						<view class="info-item">
							<view class="info-label">检测机构</view>
							<view class="info-value">{{ currentTask.institutionName || '暂无' }}</view>
						</view>
						<view class="info-item">
							<view class="info-label">检测数量</view>
							<view class="info-value">{{ currentTask.detectionQuantity || '暂无' }}</view>
						</view>
						<view class="info-item">
							<view class="info-label">树种</view>
							<view class="info-value">{{ currentTask.productName || '暂无' }}</view>
						</view>
						<view class="info-item">
							<view class="info-label">检测项目</view>
							<view class="info-value">{{ currentTask.fastDetectionProject || '暂无' }}</view>
						</view>
						<view class="info-item">
							<view class="info-label">录入人员</view>
							<view class="info-value">{{ currentTask.createName || '暂无' }}</view>
						</view>
						<view class="info-item">
							<view class="info-label">录入部门</view>
							<view class="info-value">{{ currentTask.createDeptName || '暂无' }}</view>
						</view>
						<view class="info-item">
							<view class="info-label">录入时间</view>
							<view class="info-value">{{ currentTask.createTime || '暂无' }}</view>
						</view>
						<view class="info-item">
							<view class="info-label">检测地点</view>
							<view class="info-value">{{ currentTask.detectionLocation || '暂无' }}</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { listFastDetectionTask, listFastDetectionAccording, listInstitution, getFastDetectionTask, startTask } from '@/api/kuaijian'
export default {
	data() {
		return {
			showEduPicker: false,
			showFastDetectionAccordingPicker: false,
			showInstitutionPicker: false,
			showDetailModal: false,
			currentTask: {},
			eduColumns: [
				['2020', '2021', '2022', '2023', '2024', '2025'],
			],
			fastDetectionAccordingColumns: [],
			institutionColumns: [],
			// 保存原始数据用于获取ID
			fastDetectionAccordingData: [],
			institutionData: [],
			customNavbarHeight: null,
			formData: {
				year: '',
				fastDetectionAccording: '',
				institution: '',
			},
			list: [],
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				detectionYear: null,
				fastDetectionType: null,
				fastDetectionAccording: null,
				executionAgency: null,
				institutionName: null,
				treeSpecies: null,
				userId: null,
				orchardId: null,
				institutionId: null,
				instanceId: null,
				attachmentLink: null,
				createName: null,
				status: null,
				fastDetectionProject: null,
				orchardName: null,
				createDeptId: null,
				createDeptName: null
			},
		}
	},
	onLoad() {
		this.getList()
		this.getFastDetectionAccordingList()
		this.getInstitutionList()
	},
	methods: {
		// 显示详情弹窗
		showDetail(item) {
			this.currentTask = item;
			this.showDetailModal = true;
		},
		
		// 关闭详情弹窗
		closeDetailModal() {
			this.showDetailModal = false;
			this.currentTask = {};
		},
		
		// 显示抽样单
		showSamplingSheet(item) {
			uni.showToast({
				title: '请在待办中查看',
				icon: 'none'
			});
		},
		
		// 显示检测单
		showDetectionSheet(item) {
			uni.showToast({
				title: '请在待办中查看',
				icon: 'none'
			});
		},
		startTask(item) {
			startTask(item.id).then(res => {
				console.log('启动任务:', res);
				this.getList();
				uni.showToast({
					title: '启动成功',
					icon: 'success'
				});
			})
		},
		getDetail(id) {
			getFastDetectionTask(id).then(res => {
				console.log('快检任务详情:', res);
			})
		},
		taskXiafa() {
			uni.navigateTo({
				url: '/pages/workbench/01task/kuaijianxiafa'
			})
		},
		yearConfirm(e) {
			this.formData.year = e.value[0];
			// 同时更新查询参数
			this.queryParams.detectionYear = e.value[0];
			this.showEduPicker = false;
			// 重新查询列表
			this.getList();
		},
		fastDetectionAccordingConfirm(e) {
			const selectedLabel = e.value[0];
			this.formData.fastDetectionAccording = selectedLabel;
			
			// 如果选择的是"全部"，清空查询参数
			if (selectedLabel === '全部') {
				this.queryParams.fastDetectionAccording = null;
				console.log('选择全部快检检测依据');
			} else {
				// 根据选择的标签找到对应的ID
				const selectedItem = this.fastDetectionAccordingData.find(item => item.dictLabel === selectedLabel);
				if (selectedItem) {
					this.queryParams.fastDetectionAccording = selectedItem.dictValue;
					console.log('选择的快检检测依据ID:', selectedItem.dictValue);
				}
			}
			
			this.showFastDetectionAccordingPicker = false;
			// 重新查询列表
			this.getList();
		},
		institutionConfirm(e) {
			const selectedLabel = e.value[0];
			this.formData.institution = selectedLabel;
			
			// 如果选择的是"全部"，清空查询参数
			if (selectedLabel === '全部') {
				this.queryParams.institutionId = null;
				console.log('选择全部检测机构');
			} else {
				// 根据选择的标签找到对应的ID
				const selectedItem = this.institutionData.find(item => item.dictLabel === selectedLabel);
				if (selectedItem) {
					this.queryParams.institutionId = selectedItem.dictValue;
					console.log('选择的检测机构ID:', selectedItem.dictValue);
				}
			}
			
			this.showInstitutionPicker = false;
			// 重新查询列表
			this.getList();
		},
		// 获取快检检测依据列表
		getFastDetectionAccordingList() {
			listFastDetectionAccording().then(res => {
				if (res && res.data && Array.isArray(res.data)) {
					// 将字典数据转换为选择器需要的格式，保存原始数据用于获取ID
					this.fastDetectionAccordingData = res.data;
					// 在前面加上"全部"选项
					this.fastDetectionAccordingColumns = [['全部', ...res.data.map(item => item.dictLabel)]];
				}
			}).catch(err => {
				console.error('获取快检检测依据列表失败:', err);
			});
		},
		// 获取检测机构列表
		getInstitutionList() {
			listInstitution().then(res => {
				if (res && res.data && Array.isArray(res.data)) {
					// 将字典数据转换为选择器需要的格式，保存原始数据用于获取ID
					this.institutionData = res.data;
					// 在前面加上"全部"选项
					this.institutionColumns = [['全部', ...res.data.map(item => item.dictLabel)]];
				}
			}).catch(err => {
				console.error('获取检测机构列表失败:', err);
			});
		},
		getList() {
			listFastDetectionTask(this.queryParams).then(res => {
				console.log('快检任务列表:', res);
				if (res && res.rows) {
					this.list = res.rows;
				} else {
					this.list = [];
				}
			}).catch(err => {
				console.error('获取快检任务列表失败:', err);
				this.list = [];
			});
		},
	},
	computed: {
		navbarHeight() {
			// 如果设置了自定义高度，则使用自定义高度
			if (this.customNavbarHeight) {
				return this.customNavbarHeight;
			}
			// 否则自动计算：状态栏高度 + 导航栏高度
			const systemInfo = uni.getSystemInfoSync();
			// 将px转换为rpx (1px = 2rpx)
			const statusBarHeightRpx = systemInfo.statusBarHeight * 2;
			const navbarHeightRpx = 44 * 2; // 44px = 88rpx
			return statusBarHeightRpx + navbarHeightRpx;
		},
	},
}
</script>

<style lang="scss" scoped>
.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}

/* 详情弹窗样式 */
.detail-modal {
	width: 600rpx;
	max-height: 80vh;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
}

.modal-header {
	padding: 40rpx 40rpx 20rpx;
	text-align: center;
	border-bottom: 1px solid #f0f0f0;
}

.modal-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.modal-content {
	max-height: 60vh;
	overflow-y: auto;
	padding: 20rpx 40rpx 40rpx;
}

.task-info {
	.info-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		padding-bottom: 10rpx;
	}
	
	.info-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 24rpx;
		padding: 16rpx 0;
		border-bottom: 1px solid #f5f5f5;
		
		&:last-child {
			border-bottom: none;
		}
	}
	
	.info-label {
		width: 200rpx;
		font-size: 28rpx;
		color: #666;
		flex-shrink: 0;
	}
	
	.info-value {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.level-tag {
		display: inline-block;
		background: #f0f0f0;
		color: #666;
		font-size: 20rpx;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		margin-left: 16rpx;
	}
}
</style>
